<template>
	<view class="messages">
		<!-- #ifndef MP-ALIPAY -->
			<cu-custom bgColor="bg-gradual-blue" :isBack="true">
				<block slot="backText">返回</block>
				<block slot="content">消息列表</block>
			</cu-custom>
		<!-- #endif -->
		<block v-if="messObj.hasnot_read_messages.length > 0">
			<view class="cu-bar bg-white solid-bottom">
				<view class="action">
					<text class="cuIcon-title text-orange "></text> 未读消息
				</view>
				<view class="action">
					<button class="cu-btn bg-green shadow" @tap="markAllMsg">
						<text class="cuIcon-noticefill"></text>
					</button>
				</view>
			</view>
			<view class="cu-list menu-avatar">
				<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in messObj.hasnot_read_messages" :key="item.id"
				 @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index">
					<view class="cu-avatar round lg" :style="[{backgroundImage:'url('+item.author.avatar_url+')'}]"></view>
					<view class="content">
						<view class="text-grey">{{item.topic.title}}</view>
						<view class="text-gray text-sm text-cut">
							{{item.reply.content}}
						</view>
					</view>
					<view class="action">
						<view class="text-grey text-xs">{{item.reply.create_at|handlTime}}</view>
					</view>
					<view class="move">
						<view class="bg-gradual-red" @tap="markOneMsg(item.id)">标记已读</view>
					</view>
				</view>
			</view>
		</block>
		<block v-if="messObj.has_read_messages.length > 0">
			<view class="cu-bar bg-white solid-bottom" :class="{'margin-top':messObj.hasnot_read_messages.length > 0 ? true : false}">
				<view class="action">
					<text class="cuIcon-title text-orange "></text> 已读消息
				</view>
			</view>
			<view class="cu-list menu-avatar">
				<view class="cu-item" v-for="item in messObj.has_read_messages" :key="item.id">
					<view class="cu-avatar round lg" :style="{'background-image':'url('+item.author.avatar_url+')'}"></view>
					<view class="content">
						<view class="text-grey">{{item.topic.title}}</view>
						<view class="text-gray text-sm flex">
							<view class="text-cut">
								{{item.reply.content}}
							</view> </view>
					</view>
					<view class="action">
						<view class="text-grey text-xs">{{item.reply.create_at|handlTime}}</view>
					</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	import getApp from '../../App.vue'
	export default {
		data() {
			return {
				modalName: null,
				listTouchStart: 0,
				listTouchDirection: null,
				messObj: {
					has_read_messages: [],
					hasnot_read_messages: []
				}
			};
		},
		methods: {
			// ListTouch触摸开始
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},
			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},
			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			},
			// 获取全部消息
			async getMess() {
				const res = await this.$api.getMess({
					accesstoken: getApp.globalData.accesstoken,
					mdrender: false
				})
				this.messObj = res
			},
			// 标记一个消息已读
			async markOneMsg(id) {
				const res = await this.$api.markOneMsg(id,getApp.globalData.accesstoken);
				this.getMess();
			},
			// 标记全部信息已读
			async markAllMsg() {
				await this.$api.markAllMsg(getApp.globalData.accesstoken);
				this.getMess();
			}
		},
		onShow() {
			this.getMess()
		}
	}
</script>

<style lang="scss">

</style>
